<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { defineProps, defineEmits } from 'vue'

// 接收父组件数据
const props = defineProps({
    userName: {
        type: String
    }
})

// 向父组件传递方法
const emit = defineEmits(['logout'])
// 退出登录（子组件触发父组件方法）
const Logout = () => {
    emit('logout')
}

const originalPrice = ref(10.00)
const selected = ref("1")

let totalPrice = computed(() => {
    return (originalPrice.value * Number(selected.value)).toFixed(2)
})

//  watch 监听折扣变化
watch(
    () => selected.value,
    (newVal, oldVal) => {
        console.log("折扣从" + oldVal * 10 + "折切换为" + newVal * 10 + "折，折后价：" + totalPrice.value)
        console.log("正在进行价格折扣...")

    },
    { immediate: true } // 立即执行一次
)

</script>

<template>
    <div id="goods_box">
        <div id="user-info">
            <span>你好~ {{ userName }} ！</span>
            <button id="logout-btn" @click="Logout">退出登录</button>
        </div>

        <div id="goods">
            <h3>柿子原价：¥{{ originalPrice }}</h3>
            <div class="discount-select">
                <label>选择折扣：</label>
                <select v-model="selected">
                    <option value="1">无折扣</option>
                    <option value="0.9">9折</option>
                    <option value="0.8">8折</option>
                    <option value="0.7">7折</option>
                    <option value="0.6">6折</option>
                </select>
            </div>
        </div>

        <div>
            折后单价：<span id="price">{{ totalPrice }}</span>
        </div>
    </div>
</template>

<style scoped></style>